<template>
  <div class="body">
    <section class="search-banner">
      <div class="center-block">
        <div class="index-title pull-left">
          <h2>办件查询</h2>
        </div>
      </div>
    </section>
    <section class="searchMain">
      <div class="MainTop">
        <div class="indexSearchBox">
          <div class="input-group">
            <span class="input-group-btn">
              <i class="inSearchFdj dtFont dtFont-sousuo"></i>
            </span>
            <input
              type="text"
              placeholder="请输入您要查询的事项"
              class="form-control"
              v-model="search"
              ref="inputList"
            />
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" @click="find">搜索</button>
            </span>
          </div>
        </div>
      </div>
      <div class="center-block">
        <h3 class="circular-title">审批情况发办件查询布</h3>
        <div class="MainTable">
          <el-table :data="tableList" style="width: 100%">
            <el-table-column prop="articleAddDate" label="办件编号" width="150"></el-table-column>
            <el-table-column prop="articleTitle" label="项目名称" width="130"></el-table-column>
            <el-table-column prop="itemName" label="事项名称" width="100"></el-table-column>
            <el-table-column prop="articleAuthor" label="受理部门" width="200"></el-table-column>
            <el-table-column :formatter="dateForma" prop="articleAddDate" label="申请日期" width="150"></el-table-column>
            <el-table-column :formatter="dateForma" prop="articleAddDate" label="承诺日期"></el-table-column>
            <el-table-column :formatter="dateForma" prop="deliverTime" label="办结日期" width="150"></el-table-column>
            <el-table-column prop="file" label="办件状态" width="150">已办结(正式出文)</el-table-column>
          </el-table>
        </div>
        <!-- 分页功能 -->
        <div style="padding: 30px 0 15px 0">
          <div class="fenYe clearfix">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="tableQuery.page"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="tableQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getBlackList, getTableList } from "@/api/projectApproval/index.js";
// moment 转换时间格式的插件
import moment from "moment";
import "@/assets/css/projectApproval.css";
export default {
  data: function() {
    return {
      search: "",
      searchData: "",
      // input中输入数据
      searchVal: "",
      // input输入的数据
      searchList: "",
      // 表格数据
      tableList: [],
      tableQuery: {
        // 当前的页数
        page: 1,
        // 当前显示多少条
        pageSize: 2
      },
      total: 0
    };
  },
  methods: {
    // 点击搜索列表数据
    find() {
      
    },
    // 获得表格数据
    getTableList() {
      getTableList().then(res => {
        // console.log(res);
        this.tableList = res.obj.rows;
        this.total = res.obj.total;
      });
    },
    // 时间转化函数
    dateForma: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    // 右边每页多少条数据
    handleSizeChange(newSize) {
      this.tableQuery.page = newSize;
      this.getTableList();
      // console.log( this.tableQuery.page);
    },
    // 左边栏第几页的数据
    handleCurrentChange(newPage) {
      // this.tableQuery.pageSize=newPage
      // this.getTableList();
      // console.log( newPage);
    }
  },
  created() {
    // 获取表格数据
    this.getTableList();
  }
};
</script>

<style lang="less" scoped>
// 下划线
.headNav li.active a:after {
  display: block;
  .headNav li a:after {
    content: "";
    display: none;
    width: 100%;
    height: 3px;
    background: white;
    position: absolute;
    left: 0;
    top: 32px;
  }
}
.center-block {
  padding: 30px !important;
}
</style>
